<template>
    <el-table :data="tableData" :stripe="true" style="width: 100%">
      <el-table-column prop="title" label="文章名称" width="180" />
      <el-table-column prop="category" label="文章分类" width="180" >
        <template v-slot="scope">
            <el-tag>{{ scope.row.category.categoryName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="发表时间" width="180" />
      <el-table-column prop="state" label="状态" width="180" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template v-slot="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
            删除
          </el-button>
          <el-button link type="primary" size="small" @click="xiangqing(scope.row.id)">
           详情
          </el-button>
          <!-- 编辑文章 -->
          <el-button type="primary" style="margin-left: 16px" @click="bianji(scope.row)">
              编辑
          </el-button>
        </template>

      </el-table-column>
    </el-table>
</template>
<script setup>
import { ref, defineProps,defineEmits } from 'vue'
//声明组件
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
})

//在此处定义子组件中要调用父组件的方法
const emit = defineEmits(['delArticle','xiangqing','bianji'])

const handleClick = (id) => {
  console.log(id)
  //调用删除文章的方法
  emit('delArticle',id)
}
const xiangqing = (id) => {
  console.log(id)
  //调用文章详情的方法
 emit('xiangqing',id)
}
const bianji = (row) => {
  //把行对象中的所有属性复制到neirong对象中
  const neirong= {...row}
  console.log(neirong)
  //调用文章编辑的方法
  emit('bianji',neirong)
}

</script>


<style lang='scss' scoped>

</style>